<template>
  <div class="hello" style="background-color: #f5f5f5">
    <v-nav :current="'4'" :langType="lang" :lang="lang" @EnData="EnData" @ChData="ChData"></v-nav>
    <div class="banner-s">
      <img src="@/assets/banner3.jpg" alt="" style="width: 100%;border: 0">
    </div>
    <div class="main p-content" style="margin-bottom: 66px">
      <div class="menu">
        <h1>{{title}}</h1>
        <div>
          <p @click="_pitch(list, index)" :class="{active: currentIndex === index}"
          v-for="(list, index) in lists"
          :key="list.id">{{list.name}}
          </p>
        </div>
      </div>
      <div class="items">
        <div class="item-title">
          <span v-for="(sonMenu, index) in menuListSon" :key="sonMenu.id"
          @click="_getShopList(sonMenu.id, index)"
          :class="{activeSonMenu: currentIndexSonIndex === index}"
          >{{sonMenu.name}}</span>
        </div>
        <div class="item" v-for="shop in shopLists" :key="shop.id">
          <div>
            <div class="main">
              <div class="c">
                <router-link :to="{name: 'productDetails', params: {id: shop.id}}" tag="div" class="img-div">
                  <img :src="shop.src" alt="">
                </router-link>
                <div class="main-brief">
                  <h1>{{shop.post_title}}</h1>
                  <p><span style="font-weight: bolder">【{{productIntroduce[0]}}】</span>{{shop.post_title}}</p>
                  <p><span style="font-weight: bolder">【{{productIntroduce[1]}}】</span>{{shop.post_product_name}}</p>
                  <p><span style="font-weight: bolder">【{{productIntroduce[2]}}】</span>{{shop.post_product_info}}</p>
                  <p><span style="font-weight: bolder">【{{productIntroduce[4]}}】</span>{{shop.post_product_kind}}</p>
                  <p><span style="font-weight: bolder">【{{productIntroduce[5]}}】</span>{{shop.post_product_spec}}</p>
                </div>
              </div>
              <router-link :to="{name: 'productDetails', params: {id: shop.id}}" tag="div" class="t">
                <span>{{details}}</span>
                <img src="@/assets/product/icon.png" alt="">
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div style="display:flex;justify-content: center;margin-top: 49px;margin-bottom: 66px">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="4"
        :current-page.sync="currentPage"
        @current-change="handleCurrentChanges"
        >
      </el-pagination>
    </div>
    <vFooter></vFooter>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import vNav from '@/components/nav.vue'
import vFooter from '@/components/footer.vue'
import { getProductData, getProductListData } from '@/services/api.js'
import { getProductDataEn, getProductListDataEn } from '@/services/api_en.js'
export default {
  name: 'product',
  data () {
    return {
      title: null,
      details: null,
      total: 1,
      lists: [],
      shopLists: [],
      currentIndex: 0,
      currentIndexSonIndex: 0,
      id: null,
      page: 1,
      currentPagell: 1,
      defaultId: null,
      sonDefaultId: null,
      menuListSon: [],
      isEnShow: false
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'productIntroduce': 'productIntroduce'
    })
  },
  components: {
    vNav,
    vFooter
  },
  methods: {
    _pitch (list, index) {
      // 初始化新类第一页
      this.page = 1
      this.currentPage = 1
      this.shopLists = []
      this.currentIndex = index
      this.menuListSon = []
      if (list.son && list.son.length) {
        this.menuListSon = list.son
        // 保存子级默认id
        this.sonDefaultId = list.son[0].id
        console.log('子级默认id' + this.sonDefaultId)
        this.id = this.sonDefaultId
      } else {
        // alert('暂无数据')
        this.id = list.id
      }
      let params = {
        page: this.page,
        id: this.id
      }
      if (this.lang === 1) {
        getProductListData(params).then((res) => {
          console.log(res)
          this.total = res.total
          this.shopLists = res.data
        })
      }
      if (this.lang === 2) {
        getProductListDataEn(params).then((res) => {
          console.log(res)
          this.total = res.total
          this.shopLists = res.data
        })
      }
    },
    _getShopList (id, index) {
      this.currentIndexSonIndex = index
      this.shopLists = []
      // 保存子级当前id
      this.id = id
      let params = {
        id: this.id,
        page: this.page
      }
      // let param = Object.assign({}, params)
      getProductListData(params).then((res) => {
        console.log(res)
        if (!res) {
          this.total = null
          this.shopLists = []
        } else {
          this.total = res.total
          this.shopLists = res.data
        }
      })
    },
    _getShopListEn (id, index) {
      this.currentIndexSonIndex = index
      this.shopLists = []
      // 保存子级当前id
      this.id = id
      let params = {
        id: this.id,
        page: this.page
      }
      // let param = Object.assign({}, params)
      getProductListDataEn(params).then((res) => {
        if (!res) {
          this.total = null
          this.shopLists = []
        } else {
          this.total = res.total
          this.shopLists = res.data
        }
      })
    },
    handleCurrentChanges (val) {
      this.page = val
      if (this.lang === 1) {
        this._getShopList(this.id)
      }
      if (this.lang === 2) {
        this._getShopListEn(this.id)
      }
    },
    _getChList (sw, page) {
      this.currentIndex = 0
      this.currentIndexSonIndex = 0
      this.title = '产品中心'
      this.details = '详情'
      this.defaultId = null
      this.lists = []
      getProductData().then((res) => {
        console.log(res)
        this.lists = res
        this.menuListSon = res[0].son
        // 保存首次加载默认产品id
        this.defaultId = res[0].son[0].id
        this._getShopList(this.defaultId)
      })
    },
    _getEnList () {
      this.currentIndex = 0
      this.currentIndexSonIndex = 0
      this.title = 'Products'
      this.details = 'details'
      this.defaultId = null
      this.lists = []
      getProductDataEn().then((res) => {
        console.log(res)
        this.lists = res
        this.menuListSon = res[0].son
        // 保存首次加载默认产品id
        this.defaultId = res[0].son[0].id
        console.log('英文默认id' + this.defaultId)
        this._getShopListEn(this.defaultId)
      })
    },
    version () {
      if (this.lang === 1) {
        this._getChList()
        this.isEnShow = false
      }
      if (this.lang === 2) {
        this._getEnList()
        this.isEnShow = true
      }
    },
    EnData (res) {
      this.shopLists = []
      this._getEnList()
      this.isEnShow = true
    },
    ChData (res) {
      this.shopLists = []
      this._getChList()
      this.isEnShow = false
    }
  },
  created () {
    this.currentIndex = 0
    this.version()
    this._pitch()
    window.scrollTo(0, 0)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .active {
    color: #2053b9!important;
    width: 216px!important;
    border-left: 4px solid #2053b9;
    transition: all .2s
  }
  .active:hover {
    background-color: #2053b9!important;
    color: #fff!important
  }
  .activeSonMenu {
    color: #2053b9!important;
    transition: all .2s
  }
  .activeSonMenu:hover {
    background-color: #2053b9!important;
    color: #fff!important
  }
  .main {
    display: flex;
    align-items: flex-start;
  }
  .menu {
    width: 220px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    // margin-top: -80px;
    position: relative;
    z-index: 2;
    margin-right: 17px;
    h1 {
      width: 220px;
      height: 80px;
      background-color: #2053b9;
      font-size: 30px;
      color: #fff;
      line-height: 80px;
      text-align: center;
      font-weight: normal
    }
    div {
      display: flex;
      flex-direction: column;
      p {
        width: 210px;
        // height: 60px;
        background-color: #fff;
        font-size: 16px;
        line-height: 30px;
        letter-spacing: 0px;
        color: #373737;
        padding: 10px 1px;
        text-align: left;
        // line-height: 60px;
        border-bottom: 1px solid #f2f2f2;
        cursor: pointer
      }
      p:hover {
        background-color: #2053b9;
        color: #fff
      }
      p:last-child {
        border-bottom: 0
      }
    }
  }
  .items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .item-title {
      display: flex;
      margin-top: 15px;
      span {
        display: block;
        padding: 0 20px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #666;
        border-radius: 4px;
        margin-right: 15px;
        background-color: #fff
      }
      span:hover {
        color: #fff;
        background-color: #2053b9;
        cursor: pointer
      }
    }
    .item {
      width: 963px;
      // height: 264px;
      background-color: #ffffff;
      margin-top: 15px;
      >div {
        padding: 32px;
        .main {
          display: flex;
          justify-content: space-between;
          >div.c {
            display: flex;
            .img-div {
              width: 300px;
              height: 200px;
              background-color: #ffffff;
              border: solid 1px #cccccc;
              overflow: hidden;
              cursor: pointer;
              img {
                width: 100%;
                height: 100%
              }
            }
            .main-brief {
              margin-left: 63px;
              width: 427px;
              h1 {
                font-size: 24px;
                line-height: 30px;
                letter-spacing: 1px;
                color: #333333;
                margin-bottom: 16px
              }
              p {
                font-size: 16px;
                color: #333;
                line-height: 30px
              }
            }
          }
          >div.t {
            align-self: flex-end;
            width: 81px;
            height: 39px;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            span {
              margin-right: 8px;
              color: #2053b9;
              font-size: 16px;
              line-height: 0;
            }
          }
        }
        .main:hover .img-div>img {
          transform: scale(1.1);
          transition: all 1.5s
        }
      }
    }
  }
</style>
